<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
<%@ include file="common.jsp"%>

<title><%=proName%></title>
<link type="text/css" rel="stylesheet" href="<%=rootPath %>/css/manage/selectResult.css"/>
<script type="text/javascript" src="<%=rootPath%>/js/manage/wxAutomaticReplyManage.js"></script>
</head>

<body scroll="no">
	<jsp:include page="./menu.jsp"></jsp:include>
	<div id="body">
		<div id="navTop">
			<div class="bg_left"></div>
			<div class="bg_main"></div>
			<div class="bg_right"></div>
		</div>
		<div id="userManager">
			<table width="100%" cellpadding="0" cellspacing="0" border="0"
				class="maintable">
				<tr>
					<th colspan="4" align="left" valign="middle">
						<table cellpadding="0" cellspacing="0">
							<tr>
								<th><span id="search_icon" class="search_icon"></span></th>
								<th height="30px"><span style="margin-left: 2px;">关键词自动回复</span>
								</th>
							</tr>
						</table>
					</th>
				</tr>
				<tr>
					<td colspan="4" align="left" valign="middle">
						<table cellpadding="0" cellspacing="0">
							<tr>
								<th height="30px">
									<input id="reset" type="button"
									onclick="addNewRule()"
									class="ui-button ui-widget ui-state-default ui-corner-all"
									role="button" aria-disabled="false" value="+ 添加规则"
									onmouseover="this.style.background='#FFF18B'"
									onmouseout="this.style.background='#F1EDD2'" />
								</th>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>
					<!-- tianjia guize biao start -->
					<form id="rule_form_0" action="<%=rootPath %>/autoReply/add.mge" method="post">
					<input type="hidden" name="appid" value="wx8fc3d0ff35adb3f9"/>
<%-- 					<input type="hidden" id="appid" name="appid" value="${appid }"/> --%>
					<table id="newRule" class="maintable" width="95%" style="margin:auto;border:1px #ccc solid;margin-bottom: 20px;display: none;">
				        <tr>
				            <th class="adminth" style="width:20%;">新规则</th>
				            <th class="adminth" ></th>
				        </tr>
				        <tr>
				            <td colspan="2">
				            	<table>
				            		<tr style="background-color: #FFF">
						                <td colspan="2">
						                	<table class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;">
										        <tr style="background-color: #FFF;">
										            <td style="width:10%">规则名：</td>
										            <td style="text-align: left;">
										            	<input type="text" id="newRuleName" name="ruleName"/>
										            </td>
										        </tr>
											</table>
						                </td>
							        </tr>
							        <tr style="background-color: #FFF">
						                <td colspan="2">
						                	<table id="keyTable_0" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;">
							                	<tr>
										            <th class="adminth" style="width:20%;">关键词：</th>
										            <th class="adminth" style="text-align: right;">
											            <a href="javascript:addKeyword('keyTable_0')">添加关键词</a>
										            </th>
										        </tr>
										        <tr id="keyTable_0_0" style="background-color: #FFF;">
										            <td style="width:10%">
										            	<input type="text" name="keywords[0].keyWord"/>
										            </td>
										            <td style="text-align: right;">
										            	<input type="radio" name="keywords[0].matchType" value="0" checked="checked"/>不全匹配
										            	<input type="radio" name="keywords[0].matchType" value="1"/>全匹配
										            	<a href="javascript:deleteKeyword('keyTable_0_0')">删除</a>
										            </td>
										        </tr>
											</table>
						                </td>
							        </tr>
							         <tr style="background-color: #FFF">
						                <td colspan="2">
						                	<table class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;">
										        <tr style="background-color: #FFF;">
										            <th class="adminth" style="width:20%;">回复：</th>
										            <th class="adminth" style="text-align: right;"> </th>
										        </tr>
										        <tr style="background-color: #FFF;">
										            <td colspan="2">
										            	<input type="hidden" id="reply_material_0" name="material.id" value=""/>
										            	<label onclick="selectReplyType('text','0')" style="cursor: pointer;"><input type="radio" checked="checked" name="material.materialType" value="text"/>文本</label>
										            	<label onclick="selectReplyType('news','0')" style="cursor: pointer;"><input type="radio" name="material.materialType" value="news"/>图文</label>
<!-- 										            	<label onclick="selectReplyType('image','0')" style="cursor: pointer;"><input type="radio" disabled="disabled" name="material.materialType" value="image"/>图片</label> -->
<!-- 										            	<label onclick="selectReplyType('video','0')" style="cursor: pointer;"><input type="radio" disabled="disabled" name="material.materialType" value="video"/>视频</label> -->
<!-- 										            	<label onclick="selectReplyType('voice','0')" style="cursor: pointer;"><input type="radio" disabled="disabled" name="material.materialType" value="voice"/>音频</label> -->
										            </td>
										        </tr>
										         <tr style="background-color: #FFF;">
										            <td colspan="2" id="replyContent_0">
										            <textarea rows="3" cols="50" name="material.content"></textarea>
										            </td>
										        </tr>
										        <tr>
										        	<td colspan="2" align="right">
										        		<input id="" type="button"
															onclick="saveRules('rule_form_0','add')"
															class="ui-button ui-widget ui-state-default ui-corner-all"
															role="button" aria-disabled="false" value="保存"
															onmouseover="this.style.background='#FFF18B'"
															onmouseout="this.style.background='#F1EDD2'" />
															<input id="" type="button"
															onclick="quitAddNewRule()"
															class="ui-button ui-widget ui-state-default ui-corner-all"
															role="button" aria-disabled="false" value="取消"
															onmouseover="this.style.background='#FFF18B'"
															onmouseout="this.style.background='#F1EDD2'" />
										        	</td>
										        </tr>
											</table>
						                </td>
							        </tr>
				            	</table>
				            </td>
				        </tr>
					</table>
					</form>
					<!-- tianjia guize biao end -->
					
					<!-- 自动回复规则列表 -->
					<c:forEach items="${list}" var="reply" varStatus="n">
					<form id="rule_form_${n.index+1 }" action="">
					<input type="hidden" name="appid" value="${appid }"/>
					<input type="hidden" id="replyid" name="id" value="${reply.id }"/>
					<input type="hidden" id="reply_material_${n.index+1 }" name="material.id" value="${reply.material.id }"/>
					<table id="" class="maintable" width="95%" style="margin:auto;border:1px #ccc solid;margin-bottom: 20px;">
				        <tr>
				            <th class="adminth" style="width:95%;text-align: left;padding-left: 15px;">规则名称：${reply.ruleName}</th>
				            <th class="adminth" style="text-align: right;padding-right: 10px;">
					            <a href="javascript:ruleEdit('rule_table_${n.index+1 }')">编辑</a>
				            </th>
				        </tr>
				        <tr style="background-color: #FFF">
			                <td colspan="2">
			                	<table id="rule_table_view_${n.index+1 }" class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;display: block;">
							        <tr style="background-color: #FFF;">
							            <td style="width:10%">关键词：</td>
							            <td style="text-align: left;">
							            	<c:forEach items="${reply.keywordList}" var="keyword" varStatus="k">
								            	<span style="height: 24px;margin-right: 5px;background: #ccc;padding:4px;">${keyword.keyWord }</span>
							            	</c:forEach>
							            </td>
							        </tr>
							        <tr style="background-color: #FFF;">
							            <td >回复：</td>
							            <td style="text-align: left;">
							            	<c:if test="${reply.material.materialType == 'text'}">
							            		${reply.material.content }
							            	</c:if>
							            	<c:if test="${reply.material.materialType == 'news'}">
								            	<table  class="maintable" width="100%" style=" border: 1px #ccc solid; margin-bottom: 20px;background: rgb(242, 240, 218);">
												<c:forEach items="${reply.material.articleList}" var="article" varStatus="a">
													<c:if test="${article.order == 0 }">
														<tr style="height: 174px;">
															<th colspan="2" style="width: 100%; height: 174px; border-bottom: 1px solid #ccc;">
																<div style="height: 174px; width: 100%; overflow: hidden; position: relative;">
																	<img class="item_img" src="<%=rootPath%>${article.picUrl}" />
																	<div style="height: 30px; background: black; filter: alpha(opacity = 50); opacity: 0.6; position: absolute; left: 0; bottom: 0; width: 100%;">
																		<h2 style="color: white; text-align: left; padding-left: 15px; line-height: 30px;">${article.title }</h2>
																	</div>
																</div>
															</th>
														</tr>
													</c:if>
													<c:if test="${article.order != 0 }">
														<tr style="height: 80px;">
															<td style="border-bottom: 1px solid #ccc;">
																<h2>${article.title }</h2></td>
															<td width="30%" style="border-bottom: 1px solid #ccc;height: 80px;">
																<img class="item_img" src="<%=rootPath%>${article.picUrl}"/>
															</td>
														</tr>
													</c:if>
												</c:forEach>
											</table>
								            </c:if>
							            </td>
							        </tr>
								</table>
								
								<table id="rule_table_edit_${n.index+1 }" style="display: none;">
				            		<tr style="background-color: #FFF">
						                <td colspan="2">
						                	<table class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;">
										        <tr style="background-color: #FFF;">
										            <td style="width:10%">规则名：</td>
										            <td style="text-align: left;">
										            	<input type="text"  name="ruleName" value="${reply.ruleName}"/>
										            </td>
										        </tr>
											</table>
						                </td>
							        </tr>
							        <tr style="background-color: #FFF">
						                <td colspan="2">
						                	<table id="keyTable_${n.index+1 }" class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;">
							                	<tr>
										            <th class="adminth" style="width:20%;">关键词：</th>
										            <th class="adminth" style="text-align: right;">
											            <a href="javascript:addKeyword('keyTable_${n.index+1 }')">添加关键词</a>
										            </th>
										        </tr>
										        <c:forEach items="${reply.keywordList}" var="keyword" varStatus="k">
										        <tr id="keyTable_${n.index+1 }_${k.index}" style="background-color: #FFF;">
										            <td style="width:10%">
										            	<input type="text" name="keywords[${k.index }].keyWord" value="${keyword.keyWord }"/>
										            </td>
										            <td style="text-align: right;">
										            	<input type="radio" name="keywords[${k.index}].matchType" value="0" <c:if test="${keyword.matchType == '0'}">checked="checked"</c:if> />不全匹配
										            	<input type="radio" name="keywords[${k.index}].matchType" value="1" <c:if test="${keyword.matchType == '1'}">checked="checked"</c:if> />全匹配
										            	<a href="javascript:deleteKeyword('keyTable_${n.index+1 }_${k.index}')">删除</a>
										            </td>
										        </tr>
										        </c:forEach>
											</table>
						                </td>
							        </tr>
							         <tr style="background-color: #FFF">
						                <td colspan="2">
						                	<table class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;">
										        <tr style="background-color: #FFF;">
										            <th class="adminth" style="width:20%;">回复：</th>
										            <th class="adminth" style="text-align: right;"> </th>
										        </tr>
										        <tr style="background-color: #FFF;">
										            <td colspan="2">
										            	<label onclick="selectReplyType('text','${n.index+1 }')" style="cursor: pointer;"><input type="radio" checked="checked" name="material.materialType" value="text" <c:if test="${reply.material.materialType == 'text'}">checked="checked"</c:if> />文本</label>
										            	<label onclick="selectReplyType('news','${n.index+1 }')" style="cursor: pointer;"><input type="radio" name="material.materialType" value="news" <c:if test="${reply.material.materialType == 'news'}">checked="checked"</c:if> />图文</label>
<%-- 										            	<label onclick="selectReplyType('image','${n.index+1 }')" style="cursor: pointer;"><input type="radio" disabled="disabled" name="material.materialType" value="image" <c:if test="${reply.material.materialType == 'image'}">checked="checked"</c:if> />图片</label> --%>
<%-- 										            	<label onclick="selectReplyType('video','${n.index+1 }')" style="cursor: pointer;"><input type="radio" disabled="disabled" name="material.materialType" value="video" <c:if test="${reply.material.materialType == 'video'}">checked="checked"</c:if> />视频</label> --%>
<%-- 										            	<label onclick="selectReplyType('voice','${n.index+1 }')" style="cursor: pointer;"><input type="radio" disabled="disabled" name="material.materialType" value="voice" <c:if test="${reply.material.materialType == 'voice'}">checked="checked"</c:if> />音频</label> --%>
										            </td>
										        </tr>
										         <tr style="background-color: #FFF;">
										            <td colspan="2"  id="replyContent_${n.index+1 }">
										            <input type="hidden" id="reply_material_${n.index+1 }" name="material.id" value="${reply.materialId }"/>
										            <c:if test="${reply.material.materialType == 'text'}">
										            	<textarea rows="3" cols="50" name="material.content">${reply.material.content }</textarea>
										            </c:if>
										            <c:if test="${reply.material.materialType == 'news'}">
										            	<table  class="maintable" width="100%" style=" border: 1px #ccc solid; margin-bottom: 20px;background: rgb(242, 240, 218);">
														<c:forEach items="${reply.material.articleList}" var="article" varStatus="a">
															<c:if test="${article.order == 0 }">
																<tr style="height: 174px;">
																	<th colspan="2" style="width: 100%; height: 174px; border-bottom: 1px solid #ccc;">
																		<div style="height: 174px; width: 100%; overflow: hidden; position: relative;">
																			<img class="item_img" src="<%=rootPath%>${article.picUrl}" />
																			<div style="height: 30px; background: black; filter: alpha(opacity = 50); opacity: 0.6; position: absolute; left: 0; bottom: 0; width: 100%;">
																				<h2 style="color: white; text-align: left; padding-left: 15px; line-height: 30px;">${article.title }</h2>
																			</div>
																		</div>
																	</th>
																</tr>
															</c:if>
															<c:if test="${article.order != 0 }">
																<tr style="height: 80px;">
																	<td style="border-bottom: 1px solid #ccc;">
																		<h2>${article.title }</h2></td>
																	<td width="30%" style="border-bottom: 1px solid #ccc;height: 80px;">
																		<img class="item_img" src="<%=rootPath%>${article.picUrl}"/>
																	</td>
																</tr>
															</c:if>
														</c:forEach>
													</table>
										            </c:if>
										            <c:if test="${reply.material.materialType == 'image'}">
										            </c:if>
										            <c:if test="${reply.material.materialType == 'video'}">
										            </c:if>
										            <c:if test="${reply.material.materialType == 'voice'}">
										            </c:if>
										            <input type="hidden" id="reply_${n.index+1 }" name="material.id"/>
										            </td>
										        </tr>
										        <tr>
										        	<td colspan="2" align="right">
										        		<input id="" type="button"
															onclick="saveRules('rule_form_${n.index+1 }','update')"
															class="ui-button ui-widget ui-state-default ui-corner-all"
															role="button" aria-disabled="false" value="保存"
															onmouseover="this.style.background='#FFF18B'"
															onmouseout="this.style.background='#F1EDD2'" />
															<input id="" type="button"
															onclick="deleteRule('${reply.id}')"
															class="ui-button ui-widget ui-state-default ui-corner-all"
															role="button" aria-disabled="false" value="删除"
															onmouseover="this.style.background='#FFF18B'"
															onmouseout="this.style.background='#F1EDD2'" />
										        	</td>
										        </tr>
											</table>
						                </td>
							        </tr>
				            	</table>
			                </td>
				        </tr>
					</table>
					</form>
					</c:forEach>
<!-- 					<table class="maintable" width="95%" style="margin:auto;border:1px #ccc solid;margin-bottom: 20px;"> -->
<!-- 				        <tr> -->
<!-- 				            <th class="adminth" style="width:20%;">规则名称：测试规则1</th> -->
<!-- 				            <th class="adminth" style="text-align: right;"> -->
<!-- 					            <a href="#">编辑</a> -->
<!-- 					            <a href="#">删除</a> -->
<!-- 				            </th> -->
<!-- 				        </tr> -->
<!-- 				        <tr style="background-color: #FFF"> -->
<!-- 			                <td colspan="2"> -->
<!-- 			                	<table class="" width="100%" cellpadding="0" cellspacing="10" style="margin:auto;padding:10px;"> -->
<!-- 							        <tr style="background-color: #FFF;"> -->
<!-- 							            <td style="width:10%">关键词：</td> -->
<!-- 							            <td style="text-align: left;"> -->
<!-- 							            	<span style="height: 24px;margin-right: 5px;background: #ccc;padding:4px;">1111</span> -->
<!-- 							            	<span style="height: 24px;margin-right: 5px;background: #ccc;padding:4px;">2222</span> -->
<!-- 							            	<span style="height: 24px;margin-right: 5px;background: #ccc;padding:4px;">33333</span> -->
<!-- 							            	<span style="height: 24px;margin-right: 5px;background: #ccc;padding:4px;">444444</span> -->
<!-- 							            </td> -->
<!-- 							        </tr> -->
<!-- 							        <tr style="background-color: #FFF;"> -->
<!-- 							            <td >回复：</td> -->
<!-- 							            <td style="text-align: left;">测试回复内容</td> -->
<!-- 							        </tr> -->
<!-- 								</table> -->
<!-- 			                </td> -->
<!-- 				        </tr> -->
<!-- 					</table> -->
					</td>
				</tr>
			</table>
			<div id="pagernav"></div>
			<div id="rolesDialog" style="display: none; height: 300px">
				<div id="treeScroll">
					<div id="treebox_group"></div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="./footer.jsp"></jsp:include>
	<div id="dialog" style="width: 960px;z-index: 999;border: 1px solid #ccc;background: white;display: none;position: absolute;top: 0;left: 203px;">
		<input type="hidden" id="selected_reply_index"/>
		<div id="dialog_head" style="height: 52px;background: #E9EBF2;line-height: 52px;position: relative;">
			<h3 style="padding-left: 15px;">选择素材</h3>
			<a style="position: absolute;top: -1px;right: 15px;color: black;font-size: x-large;text-decoration: none;width: 15px;height: 15px;" href="javascript:closeMaterial('news')">X</a>
		</div>
		<div id="dialog_body" style="height: 485px;overflow-y: scroll;padding: 28px 140px;">
			<div id="d_col_1" style="width: 48%;height: 600px;display: inline-block;">
				<c:forEach items="${materials}" var="material" varStatus="s">
					<c:if test="${s.index%2==0 && material.materialType == 'news'}">
						<table id="material_news_${s.index }" class="maintable" width="100%" style=" border: 1px #ccc solid; margin-bottom: 20px;background: rgb(242, 240, 218);">
							<c:forEach items="${material.articleList}" var="article" varStatus="a">
								<c:if test="${article.order == 0 }">
									<tr style="height: 174px;">
										<th colspan="2" style="width: 100%; height: 174px; border-bottom: 1px solid #ccc;">
											<div style="height: 174px; width: 100%; overflow: hidden; position: relative;">
												<img class="item_img" src="<%=rootPath%>${article.picUrl}" />
												<div style="height: 30px; background: black; filter: alpha(opacity = 50); opacity: 0.6; position: absolute; left: 0; bottom: 0; width: 100%;">
													<h2 style="color: white; text-align: left; padding-left: 15px; line-height: 30px;">${article.title }</h2>
												</div>
											</div>
										</th>
									</tr>
								</c:if>
								<c:if test="${article.order != 0 }">
									<tr style="height: 80px;">
										<td style="border-bottom: 1px solid #ccc;">
											<h2>${article.title }</h2></td>
										<td width="30%" style="border-bottom: 1px solid #ccc;height: 80px;">
											<img class="item_img" src="<%=rootPath%>${article.picUrl}"/>
										</td>
									</tr>
								</c:if>
							</c:forEach>
							<tr id="news_tr_${s.index }" style="height: 40px;background: #DDCAA7">
								<td align="center" colspan="2" style="border-bottom: 1px solid #ccc;">
									<label style="cursor: pointer;"><input id="${s.index}" type="radio" name="news_id" value="${material.id }"/>选择</label>
								</td>
							</tr>
						</table>
					</c:if>
				</c:forEach>
			</div>
			<div id="d_col_2" style="width: 48%;height: 600px;display: inline-block;">
				<c:forEach items="${materials}" var="material" varStatus="n">
					<c:if test="${n.index%2!=0 && material.materialType == 'news'}">
						<table id="material_news_${s.index }" class="maintable" width="100%" style="border: 1px #ccc solid; margin-bottom: 20px;background: rgb(242, 240, 218);">
							<c:forEach items="${material.articleList}" var="article" varStatus="a">
								<c:if test="${article.order == 0 }">
									<tr style="height: 174px;">
										<th colspan="2" style="width: 100%; height: 174px; border-bottom: 1px solid #ccc;">
											<div style="height: 174px; width: 100%; overflow: hidden; position: relative;">
												<img class="item_img" src="<%=rootPath%>${article.picUrl}" />
												<div style="height: 30px; background: black; filter: alpha(opacity = 50); opacity: 0.6; position: absolute; left: 0; bottom: 0; width: 100%;">
													<h2 style="color: white; text-align: left; padding-left: 15px; line-height: 30px;">${article.title }</h2>
												</div>
											</div>
										</th>
									</tr>
								</c:if>
								<c:if test="${article.order != 0 }">
									<tr style="height: 80px;">
										<td style="border-bottom: 1px solid #ccc;">
											<h2>${article.title }</h2></td>
										<td width="30%" style="border-bottom: 1px solid #ccc;height: 80px;">
											<img class="item_img" src="<%=rootPath%>${article.picUrl}"/>
										</td>
									</tr>
								</c:if>
							</c:forEach>
							<tr id="news_tr_${s.index }" style="height: 40px;background: #DDCAA7">
								<td align="center" colspan="2" style="border-bottom: 1px solid #ccc;">
									<label style="cursor: pointer;"><input id="${s.index }" type="radio" name="news_id" value="${material.id }"/>选择</label>
								</td>
							</tr>
						</table>
					</c:if>
				</c:forEach>
			</div>
		</div>
		<div id="dialog_foot" style="background: #E9EBF2;height: 52px;line-height: 52px;text-align: center;">
			<span><input id="" type="button"
					onclick="selectMaterial('news')"
					class="ui-button ui-widget ui-state-default ui-corner-all"
					role="button" aria-disabled="false" value="确定"
					onmouseover="this.style.background='#FFF18B'"
					onmouseout="this.style.background='#F1EDD2'" /></span>
			<span><input id="" type="button"
				onclick="closeMaterial('news')"
				class="ui-button ui-widget ui-state-default ui-corner-all"
				role="button" aria-disabled="false" value="取消"
				onmouseover="this.style.background='#FFF18B'"
				onmouseout="this.style.background='#F1EDD2'" /></span>
		</div>
	</div>
	<script type="text/javascript">
	
	</script>
	<div id="mask" style="width: 100%;height: 100%;position: fixed;z-index: 44;opacity: 0.6;margin-top: 0px;display: none;background: rgb(204, 204, 204);left: 0;top:0;"></div>
	
</body>
</html>
